<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">

    <h1>
        colorImage/index.html
    </h1>
    This example shows how cornerstone can display color images.  It uses a custom image loader
    that returns a color image
    <br>
    <br>

    <div id="dicomImage"
         style="width:512px;height:512px"
         oncontextmenu="return false"
         onmousedown="return false">
    </div>

    <br>

    <div id="renderTime" />

</div>
</body>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>
<script>window.cornerstone || document.write('<script src="https://unpkg.com/cornerstone-core">\x3C/script>')</script>

<script>
    const canvas = document.createElement('canvas');

    // Loads an image given an imageId
    function loadImage(imageId) {
        const width = 256;
        const height = 256;

        canvas.width = width;
        canvas.height = height;
        const canvasContext = canvas.getContext('2d');
        const imageData = canvasContext.createImageData(width, height);
        const pixelData = imageData.data;
        const rnd = Math.round(Math.random() * 255);
        let index = 0;
        for (let y = 0; y < height; y++) {
            for (let x = 0; x < width; x++) {
                pixelData[index++] = (x + rnd) % 256; // RED
                pixelData[index++] = 0; // GREEN
                pixelData[index++] = 0; // BLUE
                pixelData[index++] = 255; // ALPHA
            }
        }
        canvasContext.putImageData(imageData, 0, 0);

        function getPixelData() {
            return pixelData;
        }

        function getImageData() {
            return imageData;
        }

        function getCanvas() {
            return canvas;
        }

        const image = {
            imageId: imageId,
            minPixelValue: 0,
            maxPixelValue: 255,
            slope: 1.0,
            intercept: 0,
            windowCenter: 128,
            windowWidth: 255,
            render: cornerstone.renderColorImage,
            getPixelData: getPixelData,
            getImageData: getImageData,
            getCanvas: getCanvas,
            rows: height,
            columns: width,
            height: height,
            width: width,
            color: true,
            columnPixelSpacing: 1.0,
            rowPixelSpacing: 1.0,
            invert: false,
            sizeInBytes : width * height * 4
        };


        return {
            promise: new Promise((resolve) => resolve(image)),
            cancelFn: undefined
        };
    }

    cornerstone.registerImageLoader('colorImageLoader', loadImage);

    // image enable the element
    const element = document.getElementById('dicomImage');
    cornerstone.enable(element);

    function onImageRendered(e) {
        const eventData = e.detail;
        document.getElementById('renderTime').textContent = "Render Time:" + eventData.renderTimeInMs + " ms";
    }
    element.addEventListener('cornerstoneimagerendered', onImageRendered);

    // load image and display it
    const imageId = "colorImageLoader://1";
    cornerstone.loadImage(imageId).then(function(image) {
        cornerstone.displayImage(element, image);
    });

    // add event handlers to mouse move to adjust window/center
    element.addEventListener('mousedown', function (e) {
      let lastX = e.pageX;
      let lastY = e.pageY;

      function mouseMoveHandler(e) {
        const deltaX = e.pageX - lastX;
        const deltaY = e.pageY - lastY;
        lastX = e.pageX;
        lastY = e.pageY;

        let viewport = cornerstone.getViewport(element);
        viewport.voi.windowWidth += (deltaX / viewport.scale);
        viewport.voi.windowCenter += (deltaY / viewport.scale);
        cornerstone.setViewport(element, viewport);
      }

      function mouseUpHandler() {
        document.removeEventListener('mousemove', mouseMoveHandler);
        document.removeEventListener('mouseup', mouseUpHandler);
      }

      document.addEventListener('mousemove', mouseMoveHandler);
      document.addEventListener('mouseup', mouseUpHandler);
    });
</script>
</html>
